<template>
  <div class="app-container">
    <div class="app-header">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>新增应用
      </el-button>
    </div>

    <div class="app-content">
      <el-table :data="appList" style="width: 100%">
        <el-table-column prop="name" label="应用名称" min-width="150" />
        <el-table-column prop="appId" label="应用ID" width="180" />
        <el-table-column prop="type" label="应用类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
              {{ row.status === 'enabled' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleManage(row)">
              管理
            </el-button>
            <el-button type="primary" link @click="handleVersion(row)">
              版本
            </el-button>
            <el-button type="primary" link @click="handleSettings(row)">
              设置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const appList = ref([
  {
    id: 1,
    name: '测试应用',
    appId: 'test001',
    type: '小程序',
    status: 'enabled',
    createTime: '2024-01-01 00:00:00'
  }
])

const handleAdd = () => {
  router.push('/apps/manage/create')
}

const handleManage = (row) => {
  router.push(`/apps/manage/${row.id}`)
}

const handleVersion = (row) => {
  router.push(`/apps/version/${row.id}`)
}

const handleSettings = (row) => {
  router.push(`/apps/settings/${row.id}`)
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.app-header {
  margin-bottom: 20px;
}

.app-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
</style> 